實際開始建立頁面之後，我發現另一個問題：

每個頁面的 Header 都是一樣的，那我要不要每個頁面都重新寫一次？

例如我的智慧醫院網站，每個頁面上方都需要有：

Logo
首頁
醫師查詢
預約掛號
我的預約
登入

如果每個頁面都自己寫一份 HTML 和 CSS，雖然一開始看起來沒有問題，但頁面一多之後，維護就會變得很麻煩。

因此今天開始學習 Angular 很重要的核心概念：

Component（元件）

今天的目標，就是把原本的 Header 從單純的 HTML/CSS，轉換成可以在不同頁面重複使用的 Angular Component。

一、Angular Component 到底解決了什麼問題？

在還沒有使用 Component 的時候，我可能會這樣想：

首頁
├── Header HTML
├── 首頁內容
└── Footer HTML

醫師查詢
├── Header HTML
├── 醫師查詢內容
└── Footer HTML

醫師詳細資訊
├── Header HTML
├── 醫師詳細資訊
└── Footer HTML

看起來每個頁面都很完整。

但問題是：

Header 明明是一樣的，為什麼要重複寫？

假設之後我想把 Header 的「登入」按鈕改成其他樣式。

如果每個頁面都有一份 Header，就可能需要修改很多地方。

而 Angular Component 的概念，就是把一個可以獨立管理的 UI 區塊拆出來。

例如：

Header
Doctor Card
Button
FAQ
Footer

這些都可以成為 Component。

因此可以把 Component 想成：

把網站中的某個功能或 UI 區塊獨立出來，讓它可以自己管理，也可以被重複使用。